import 'dart:io';

import 'package:ceramics/extensions/ab_widget_extensions.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'empty.dart';
import 'image_picker.dart';

class ImageMultiSelectionController extends GetxController {
  var images = <String>[].obs;

  _addImage() async {
    var path = await selectPhoto(Get.context!);
    if (!isNullOrEmpty(path)) {
      images.add(path);
    }
  }
}

class ImageMultiSelectionWidget extends StatefulWidget {
  final Widget? addWidget;
  final int maxCount;
  final ImageMultiSelectionController? controller;
  late final ImageMultiSelectionController _controller;

  ImageMultiSelectionWidget(
      {super.key, this.addWidget, this.controller, this.maxCount = 9}) {
    if (controller == null) {
      _controller = Get.put(ImageMultiSelectionController(),
          tag: hashCode.toString());
    } else {
      _controller = Get.put(controller!, tag: hashCode.toString());
    }
  }

  @override
  State<ImageMultiSelectionWidget> createState() =>
      _ImageMultiSelectionWidgetState();
}

class _ImageMultiSelectionWidgetState extends State<ImageMultiSelectionWidget> {
  var _placeHolderWidth = 90.0;
  var _placeHolderHeight = 160.0;
  final _placeHolderKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      RenderBox renderBox =
          _placeHolderKey.currentContext?.findRenderObject() as RenderBox;
      var size = renderBox.size;
      _placeHolderWidth = size.width;
      _placeHolderHeight = size.height;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return GridView(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              childAspectRatio: 9.0/14,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10
          ),
          children: [
            for (var e in widget._controller.images)
              GestureDetector(
                onTap: widget._controller._addImage,
                child: Container(
                  height: _placeHolderHeight,
                  width: _placeHolderWidth,
                  clipBehavior: Clip.hardEdge,
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Image.file(File(e), fit: BoxFit.cover).size(width: double.infinity,height: double.infinity),
                      Positioned(
                          right: 5,
                          bottom: 5,
                          child: GestureDetector(
                            onTap: () {
                              widget._controller.images.remove(e);
                            },
                            child: Image.asset('images/ceramics_60.webp',
                                width: 20),
                          ))
                    ],
                  ),
                ),
              ),
            if (widget.addWidget != null &&
                widget._controller.images.length < widget.maxCount)
              GestureDetector(
                  key: _placeHolderKey,
                  onTap: widget._controller._addImage,
                  child: widget.addWidget!),
          ]);
    });
  }
}
